<template>
  <el-form :model="dataForm" ref="dataForm"
           label-width="120px">
    <el-form-item label="所属房屋" prop="house">
      <el-input :value="dataForm.house" readonly></el-input>
    </el-form-item>
    <el-form-item label="是否可用" prop="available">
      <!--          <el-switch-->
      <!--              v-model="dataForm.available"-->
      <!--              active-color="#13ce66"-->
      <!--              inactive-color="#ff4949">-->
      <!--          </el-switch>-->
      <i :class="dataForm.available ? 'el-icon-dui' : 'el-icon-cuowu'"
         :style="{color: dataForm.available ? '#67C23A' : '#F56C6C'}"></i>
      {{ ' ' + (dataForm?.available ? '' : '不') }}可用
    </el-form-item>
    <el-form-item label="设备型号" prop="model">
      <el-input :value="dataForm.model" readonly></el-input>
    </el-form-item>
    <el-form-item label="生产厂商" prop="manufacturer">
      <el-input :value="dataForm.manufacturer" readonly></el-input>
    </el-form-item>
    <el-form-item label="购买日期" prop="purchaseDate">
      <el-input :value="dataForm.purchaseDate" readonly></el-input>
    </el-form-item>
    <el-form-item label="设备到期时间" prop="expireDate">
      <el-input :value="dataForm.expireDate" readonly></el-input>
    </el-form-item>
    <el-form-item label="备注" prop="note">
      <el-input :value="dataForm.note" readonly></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import {defineComponent} from 'vue'

export default defineComponent({
  name: "device-readonly-form",
  props: {
    dataForm: {
      type: Object,
      default: () => ({
          id: 0,
          //[buildingId,floorId,houseId]
          house: '',
          available: true,
          type: '',
          model: '',
          manufacturer: '',
          purchaseDate: '',
          expireDate: '',
          note: ''
      })
    },
  },
})
</script>

<style scoped>

</style>
